》一開始基本的事前準備為下列三項，可依照個人喜好決定
瀏覽器：Google Chrome
開發工具：VS Code
Web Server：VS Code 上的 Live Server，或者 Google 擴充程式 Web Server for Chrome
》資料夾結構如下，可依照個人喜好決定
assets：放置素材的資料夾
index.html：練習的 html 檔案
》HTML 基本檔案內容
<!DOCTYPE html>
<html lang="en">
<head>
// style 的部分, 可以先把 body 的 預設 margin 去掉
// 通常我的話，直接用「normalize css」
<style> body { margin: 0; } </style>
</head>
<body>
<script src=“//cdn.jsdelivr.net/npm/phaser@3.14.0/dist/phaser.min.js"></script>
<script>
// 等等我們要練習的區塊
(function(){
.....
})()
</script>
</body>
</html>
》Javascript 內容
創建場景
let scene = new Phaser.Scene(‘Game’)
基本配置
let config = {
type: Phaser.AUTO, // 會使用 WebGL 或 Canvas API，AUTO 是讓 Phaser 決定
width: 640,
height: 320,
scene // 等同於 scene: scene
}
創建遊戲
let game = new Phaser.Game(config)
》結論
我們完成了一開始基本的設定，可以開網頁來看看（需模擬 Server 環境打開），目前應該會是 640 * 320 的黑色區塊。
今天就先到這裡，我們明天見。
iThome鐵人賽
看影片追技術